<template>
    <view class="receipt-info-container">
        <view class="order-items">
            <view class="order-item u-flex" v-for="(receipt, index) in receiptInfo" :key="index">
                <text style="width: 120rpx;">{{ receipt.label }}:</text>
                <view class="u-m-l-20 u-line-1 u-flex-1" v-if="receipt.label !== '查看发票'" :style="{ color: receipt.label === '开票状态' ? '#f42424' : '#666' }">
                    {{ receipt.value }}
                    <navigator
                        v-if="receipt.label === '快递单号'"
                        class="u-type-error"
                        :url="`/order-module/order/express?logi_id=${receiptInfoOrigin.logi_id}&ship_no=${receiptInfoOrigin.logi_code}`"
                        style="display: inline-block;"
                    >点击查看
                    </navigator>
                </view>
                <text class="u-m-l-20" v-else @click="handleReceipt(receipt.value)">点击查看电子发票</text>
            </view>
        </view>
    </view>
</template>

<script>
import * as API_Members from '@/api/members'

export default {
    data() {
        return {
            history_id: '',
            /** 原始响应数据 */
            receiptInfoOrigin: {},
            /** 当前查看的发票详情 */
            receiptInfo: ''
        }
    },
    onLoad(options) {
        this.history_id = options.history_id
        this.getReceipt()
    },
    mounted() {
        this.getReceipt()
    },
    methods: {
        receiptType(type) {
            switch (type) {
                case 'ELECTRO':
                    return '电子普通发票'
                case 'VATORDINARY':
                    return '增值税普通发票'
                case 'VATOSPECIAL':
                    return '增值税专用发票'
            }
        },
        //查看发票
        handleReceipt(val) {
            if (this.isImage(val)) {
                uni.previewImage({ urls: [val] })
            } else {
                // #ifdef H5
                window.open(val)
                return
                // #endif
                uni.downloadFile({
                    url: val,
                    success: (res) => {
                        const filePath = res.tempFilePath
                        if (this.isDocument(val)) {
                            uni.openDocument({ filePath: filePath, showMenu: true })
                        } else {
                            uni.saveFile({
                                tempFilePath: filePath,
                                success: () => {
                                    uni.showToast({ title: '文件已保存！' })
                                }
                            })
                        }
                    }
                })
            }
        },
        // 获取详情
        getReceipt() {
            API_Members.queryReceiptInfoDetail(this.history_id).then(response => {
                this.receiptInfoOrigin = response
                let _receipt = []
                const logi = []
                if (response.status === 1) {
                    if (response.receipt_type !== 'ELECTRO') {
                        logi.push({ label: '物流公司', value: response.logi_name })
                        logi.push({ label: '快递单号', value: response.logi_code })
                    } else {
                        logi.push({
                            label: '查看发票', value: response.elec_file_list[0]
                        })
                    }
                }
                switch (response.receipt_type) {
                    case 'ELECTRO':
                        _receipt = [
                            { label: '发票类型', value: this.receiptType(response.receipt_type) },
                            { label: '发票内容', value: response.receipt_content },
                            { label: '发票抬头', value: response.receipt_title },
                            { label: '发票税号', value: response.tax_no || '无' },
                            { label: '开票状态', value: response.status === 0 ? '商家暂未开具发票' : '商家已开具发票' },
                            ...logi
                        ]
                        break
                    case 'VATORDINARY':
                        _receipt = [
                            { label: '发票类型', value: this.receiptType(response.receipt_type) },
                            { label: '发票内容', value: response.receipt_content },
                            { label: '发票抬头', value: response.receipt_title },
                            { label: '发票税号', value: response.tax_no || '无' },
                            { label: '开票状态', value: response.status === 0 ? '商家暂未开具发票' : '商家已开具发票' },
                            { label: '收票人', value: response.member_name },
                            { label: '联系方式', value: response.member_mobile },
                            {
                                label: '收票地址',
                                value: `${response.province || ''}${response.city || ''}${response.county || ''}${response.town || ''}${response.detail_addr || ''}`
                            },
                            ...logi
                        ]
                        break
                    case 'VATOSPECIAL':
                        _receipt = [
                            { label: '发票类型', value: this.receiptType(response.receipt_type) },
                            { label: '发票内容', value: response.receipt_content },
                            { label: '单位名称', value: response.receipt_title },
                            { label: '纳税人识别号', value: response.tax_no || '无' },
                            { label: '注册地址', value: response.reg_addr },
                            { label: '注册电话', value: response.reg_tel },
                            { label: '开户银行', value: response.bank_name },
                            { label: '银行账户', value: response.bank_account },
                            { label: '开票状态', value: response.status === 0 ? '商家暂未开具发票' : '商家已开具发票' },
                            { label: '收票人', value: response.member_name },
                            { label: '联系方式', value: response.member_mobile },
                            {
                                label: '收票地址',
                                value: `${response.province || ''}${response.city || ''}${response.county || ''}${response.town || ''}${response.detail_addr || ''}`
                            },
                            ...logi
                        ]
                        break
                }
                this.receiptInfo = _receipt
            })
        },
        // 判断是否是图片
        isImage(filename) {
            const index = filename.lastIndexOf('.')
            const ext = filename.substr(index + 1)
            return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'].includes(ext)
        },
        // 判断是否是文档
        isDocument(filename) {
            const index = filename.lastIndexOf('.')
            const ext = filename.substr(index + 1)
            return ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].includes(ext)
        }
    }
}
</script>

<style lang="scss" type="text/scss" scoped>
.order-items {
    background-color: #fff;
    padding: 0 20rpx;
    .order-item {
        padding: 10rpx 0;
        font-size: 28rpx;
        color: #666666;
    }
}
</style>
